<template>
	<div class="flex fixed b0 w100 bt1 just-between align-center tabbar">
		<!-- 路由跳转 -->
		<router-link 
		tag="div"
		class="flex1 flex flex-column just-center" 
		v-for="(item,index) in list" :key="index"
		:to="item.path">
			<van-icon size='30' 
			:color="$route.path===item.path?activeColor:color" 
			:name="$route.path===item.path?item.activeIcon:item.icon" />
			<p>{{item.text}}</p>
		</router-link>
	</div>
</template>
<!-- $route.path当前路由的路径 导航栏
如果当前路由的路径和path一致，那么处于被激活状态（被选中），icon和color都要变 -->
<script>
	export default{
		data(){
			return{
				list:[
					{
						icon:'wap-home-o',
						activeIcon:'wap-home',
						text:'首页',
						path:'/'
					},
					{
						icon:'bag-o',
						activeIcon:'bag',
						text:'分类',
						path:'/type'
					},
					{
						icon:'smile-comment-o',
						activeIcon:'smile-comment',
						text:'米圈',
						path:'/mi'
					},
					{
						icon:'shopping-cart-o',
						activeIcon:'shopping-cart',
						text:'购物车',
						path:'/shop'
					},
					{
						icon:'friends-o',
						activeIcon:'friends',
						text:'我的',
						path:'/my'
					}
				],
				color:'#999',
				activeColor:'#ff6700'
			}
		}
	}
</script>

<style scoped>
	.tabbar{
		height: 60px;
		background: #fff;
	}
	p{
		font-size: 14px;
		color: #999;
	}
</style>
